<!--
 * @Descripttion: 分销设置
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-05-30 11:40:27
-->
<template>
  <div class="lb-channel-set">
    <top-nav></top-nav>
    <div class="page-main">
      <lb-tips
        >渠道商的佣金应该由该笔订单服务{{ $t('action.attendantName') }}和该{{
          $t('action.attendantName')
        }}绑定的上级代理承担
        <el-popover placement="top-start" width="500" trigger="hover">
          <div class="f-caption c-title" slot>
            <div>
              例如：用户A下单实际付款除车费外为100元，渠道商B的返佣比例为10%，则渠道商B应得提成100*10%=10元
            </div>
            <div class="mt-lg">1、承担比例累计等于100%，平台不承担</div>
            <div class="ml-lg mt-sm">
              例如：{{ $t('action.attendantName') }}承担30%，{{
                $t('action.attendantName')
              }}所属代理承担70%
            </div>
            <div class="ml-lg mt-sm">
              则：{{ $t('action.attendantName') }}应承担10*30%=3元，{{
                $t('action.attendantName')
              }}所属代理应承担10*70%=7元
            </div>

            <div class="mt-lg">2、承担比例累计小于100%，平台需承担</div>
            <div class="ml-lg mt-sm">
              平台需承担金额=10*(100-{{ $t('action.attendantName') }}应承担比例
              - 所属代理商应承担比例)%
            </div>
            <div class="ml-lg mt-sm">
              例如：{{ $t('action.attendantName') }}承担30%，{{
                $t('action.attendantName')
              }}所属代理承担0%
            </div>
            <div class="ml-lg mt-sm">
              则：{{
                $t('action.attendantName')
              }}应承担10*30%=3元，平台应承担10*(100-30-0)%=7元
            </div>
            <div class="ml-lg mt-lg">
              例如：{{ $t('action.attendantName') }}承担30%，{{
                $t('action.attendantName')
              }}所属代理承担50%
            </div>
            <div class="ml-lg mt-sm">
              则：{{ $t('action.attendantName') }}应承担10*30%=3元，{{
                $t('action.attendantName')
              }}所属代理应承担10*50%=5元，平台应承担10*(100-30-50)%=2元
            </div>
            <div class="ml-lg pt-lg c-warning">
              温馨提示：
              <div class="mt-sm">
                1)、若没有所属代理，则计算规则中所属代理商应承担的金额应由平台所出
              </div>
              <div class="mt-sm">
                2)、若有所属代理且该代理在本订单中没有获得任何分成，则代理商无需承担
              </div>
              <div class="mt-sm">
                3)、若有所属代理且该代理在本订单中所得分成小于应承担金额，则该代理需将所得分成全部给渠道商，因此渠道商实际所得金额小于应得金额
              </div>
            </div>
          </div>
          <i class="el-icon-question" style="color: #000" slot="reference"></i>
        </el-popover>
      </lb-tips>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="200px"
        class="config-form"
      >
        <el-form-item label="绑定渠道商时效" prop="user_channel_over_time">
          <el-input
            v-model="subForm.user_channel_over_time"
            placeholder="请输入绑定渠道商时效"
          >
            <template slot="append">小时</template>
          </el-input>
          <lb-tool-tips
            >当用户扫描渠道商二维码后将与该渠道商绑定关系，在此时效内下单，该渠道商均享受佣金提成</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="渠道商佣金" prop="channel_balance">
          <el-input
            v-model="subForm.channel_balance"
            placeholder="请输入渠道商返佣比例"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '承担'"
          prop="channel_coach_balance"
        >
          <el-input
            v-model="subForm.channel_coach_balance"
            :placeholder="'请输入' + $t('action.attendantName') + '承担比例'"
          >
            <template slot="append">%</template>
          </el-input>
          <lb-tool-tips
            >{{ $t('action.attendantName') }}和{{
              $t('action.attendantName')
            }}所属代理承担比例总计不能大于100%
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '所属代理承担'"
          prop="channel_admin_balance"
        >
          <el-input
            v-model="subForm.channel_admin_balance"
            :placeholder="
              '请输入' + $t('action.attendantName') + '所属代理承担比例'
            "
          >
            <template slot="append">%</template>
          </el-input>
          <lb-tool-tips
            >{{ $t('action.attendantName') }}和{{
              $t('action.attendantName')
            }}所属代理承担比例总计不能大于100%
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="邀请渠道商推广海报背景图" prop="channel_poster">
          <lb-cover
            :fileList="subForm.channel_poster"
            @selectedFiles="getCover($event, 'channel_poster')"
          ></lb-cover>
          <lb-tool-tips
            >邀请渠道商推广图，图片建议尺寸：750 * 1140
            <div class="mt-sm">
              由于页面生成的二维码位置是固定的，所以设计海报时注意将中间的二维码位置留出来
            </div>
            <div class="mt-sm">
              海报背景图中不要出现诱导用户分享以及传播外链内容的
            </div>
            <div class="mt-sm">
              包括但不限于：以金钱奖励、实物奖励、虚拟奖品（包括但不限于红包、优惠券、代金券、积分、话费、流量）；声称分享可获得返佣等
            </div>
          </lb-tool-tips>
          <div>
            <lb-button
              type="danger"
              plain
              size="small"
              @click="toReset('channel_poster')"
              >{{ $t('action.defaultSet') }}</lb-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      channel_poster: 'https://lbqny.migugu.com/admin/anmo/mine/channel-share.png',
      subForm: {
        user_channel_over_time: '',
        channel_balance: '',
        channel_coach_balance: '',
        channel_admin_balance: '',
        channel_poster: []
      },
      subFormRules: {
        user_channel_over_time: { required: true, validator: this.$reg.isNum, reg_type: 2, text: '绑定渠道商时效', trigger: 'blur' },
        channel_balance: { required: true, validator: this.$reg.isPercent, text: '渠道商返佣比例', trigger: 'blur' },
        channel_coach_balance: { required: true, validator: this.$reg.isPercent, text: this.$t('action.attendantName') + '承担比例', trigger: 'blur' },
        channel_admin_balance: { required: true, validator: this.$reg.isPercent, text: this.$t('action.attendantName') + '所属代理承担比例', trigger: 'blur' },
        channel_poster: { required: true, type: 'array', message: '请选择邀请渠道商推广海报背景图', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      data.channel_poster = [{ url: data.channel_poster }]
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    getCover (img, key) {
      this.subForm[key] = img
    },
    toReset (key) {
      this.subForm[key] = [{ url: this[key] }]
      this.submitForm()
    },
    submitForm () {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          if (subForm.channel_coach_balance * 1 + subForm.channel_admin_balance * 1 > 100) {
            this.$message.error(`${this.$t('action.attendantName')}和${this.$t('action.attendantName')}所属代理承担比例总计不能大于100%`)
            return
          }
          subForm.channel_poster = subForm.channel_poster[0].url
          this.$api.system.configUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-channel-set {
  width: 100%;
  .config-form {
    .el-input {
      width: 350px;
    }
  }
}
</style>
